<template>
	<uni-popup ref="popup" type="dialog">
		<view class="dialog-wrap">
			<view class="flex_s">
				<view class="icon-box">
					<image src="/static/image/icon-waring.png" style="width: 35rpx;height: 35rpx;"></image>
				</view>
				<view class="font_size_34">{{$t('home.Device-unbinding')}}</view>
				<view></view>
			</view>

			<view class="cont">{{$t('home.Unbind-prompt')}}?</view>

			<view class="flex_s">
				<view class="btn-unbind flex_1" @click="close">{{$t('home.btn-cancel')}}</view>
				<view class="btn-unbind flex_1 color_waring" @click="confirm">{{$t('home.btn-Unbind')}}</view>
			</view>

		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: 'PopupUnbind',
		data() {
			return {
				open() {
					this.$refs.popup.open();
				},
				close() {
					this.$refs.popup.close();
				},
				confirm() {
					this.$refs.popup.close();
					this.$emit('confirm');
				}
			};
		}
	}
</script>

<style lang="scss" scoped>
	.dialog-wrap {
		text-align: center;
		padding: 50rpx;
		background: #fff;
		border-radius: 20rpx;
		width: 70vw;
		position: relative;

		.cont {
			padding: 20rpx 55rpx;
			line-height: 52rpx;
			font-size: 32rpx;
		}

		.btn-unbind {
			width: 244rpx;
			height: 80rpx;
			background: #D8D8D8;
			border-radius: 10rpx;
		}

		.color_waring {
			background-color: #FF9000;
			color: #fff;
		}
	}
</style>